<template>
	<div class="mainWrapper">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }">
				<i class="lh fw_300 lh-seller fz_20"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>财务及数据</el-breadcrumb-item>
			<el-breadcrumb-item>扣罚列表</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="3">
						<el-button type="success" @click="back()" round size="mini">返回</el-button>
						<el-button type="default" @click="downloadOrder()" round size="mini">导出明细</el-button>
					</el-col>
					<el-col :span="21">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr">
							<el-form-item>
								<el-input size="mini" class="w_110" v-model="s_staff_name" placeholder="被扣罚人"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input size="mini" class="w_150" v-model="s_task_sn" placeholder="任务编号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_150"
									v-model="s_shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item>
								<el-select size="mini" class="w_90" v-model="s_status" placeholder="状态" clearable>
									<el-option v-for="item in state" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select size="mini" class="w_100" v-model="s_time_type" placeholder="时间类型" clearable>
									<el-option label="创建时间" value="1"></el-option>
									<el-option label="审核时间" value="2"></el-option>
								</el-select>
							</el-form-item>

							<el-form-item prop="date1">
								<el-date-picker
									size="mini"
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="开始时间"
									v-model="ruleForm.date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2">
								<el-date-picker
									size="mini"
									type="date"
									value-format="yyyy-MM-dd"
									placeholder="结束时间"
									v-model="ruleForm.date2"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" @click="shearchBtn">搜索</el-button>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<div class>
				<template>
					<el-table :data="ticketList" stripe>
						<el-table-column prop="ticket_sn" label="扣罚编号" width="110" align="center"></el-table-column>
						<el-table-column prop="task_sn" label="任务编号" width="135" align="center">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary">{{ row.task_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺" min-width="170">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary">{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_name" label="任务名称" width="140" align="center">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary">{{ row.task_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="staff_name" label="被扣罚人" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary">{{ row.staff_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="merchant_name" label="手机号" width="110">
							<template slot-scope="{ row, $index }">
								<span>{{ row.staff_mobile | vf_mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="amount" label="扣罚金额" width="90" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.amount | filterNumber }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="reason" label="扣罚原因" width="160" align="center"></el-table-column>
						<el-table-column label="状态" width="80" align="center">
							<!-- <template slot-scope="{row,$index}">
                                <span class="text-success" v-if="row.status == '10'">已创建</span>
                                <span class="text-danger" v-if="row.status == '20'">已成立</span>
                                <span class="text-primary" v-if="row.status == '30'">不成立</span>
                                <span class="text-warning" v-if="row.status == '40'">已结算</span>
                            </template> -->
							<template slot-scope="{ row, $index }">
								<span class="text-success">{{ row.status_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="150"></el-table-column>
						<el-table-column prop="creater_name" label="创建人" width="100"></el-table-column>
						<el-table-column prop="audit_time" label="审核时间" width="150"></el-table-column>
						<el-table-column prop="auditor_name" label="审核人" width="100"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'

export default {
	name: 'ticketList',
	data() {
		return {
			bill_staff_sn: '',
			dataMes: '',
			ids: '',
			index: '',
			shenhe_status: '',
			message: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			state: [
				{ id: '', name: '状态' },
				{ id: '10', name: '已创建' },
				{ id: '20', name: '已成立' },
				{ id: '30', name: '不成立' },
				{ id: '40', name: '已结算' }
			],
			//搜索对应值
			s_staff_name: '', //被扣罚人
			s_task_sn: '', //任务编号
			s_shop_id: '', //店铺id
			s_shop_name: '', //店铺名
			s_status: '', //扣罚状态 [1]启用[2]禁用
			s_time_type: '', //时间类型
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},
			ticketList: [], //扣罚列表
			diaTitle: '', //弹框title

			shopList: [], //店铺列表

			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',

			//新增扣罚，编辑扣罚，相关
			mes_task_id: '',
			mes_task_sn: '',
			mes_task_name: '',
			mes_shop_id: '',
			mes_shop_sn: '',
			mes_shop_name: '',
			mes_staff_id: '',
			mes_staff_sn: '',
			mes_staff_name: '',
			mes_staff_mobile: '',
			mes_amount: '',
			mes_reason: '',
			mes_shenhe: '', //审核
			mes_beizhu: '' //备注
		}
	},
	created() {
		//获取账单bill_staff_sn
		this.bill_staff_sn = this.$route.query.bill_staff_sn
	},
	mounted() {
		this.listShopList()
	},
	methods: {
		listTicket() {
			//获取用户列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数

			fn.append('bill_staff_sn', this.bill_staff_sn)
			fn.append('staff_name', this.s_staff_name)
			fn.append('task_sn', this.s_task_sn)
			fn.append('shop_id', this.s_shop_id)
			fn.append('time_type', this.s_time_type)
			fn.append('status', this.s_status)
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			fn.append('start_time', ruleForm_date1)
			fn.append('end_time', ruleForm_date2)

			this.$http.post(this.url + '/ticket/ticketList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							this.ticketList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.ticketList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		listShopList() {
			//获取商铺列表
			// let fn = new FormData()
			// this.$http.post(this.url + '/shop/list', fn).then(
			// 	res => {
			// 		// console.log(res.data.data);
			// 		if (res.data.msg == '查询成功' || res.data.code == '200') {
			// 			if (res.data.data != null) {
			// 				res.data.data.list.forEach(item => {
			// 					item.value = item.name
			// 				})
			// 				this.shopList = res.data.data.list
			// 			} else {
			// 				this.shopList = []
			// 			}
			// 		} else if (res.data.code == '8886') {
			// 			//code   8886  登录过期
			// 			sessionStorage.clear()
			// 			this.$alert('登录已过期，请重新登录 !', '提示', {
			// 				confirmButtonText: '确定',
			// 				callback: action => {
			// 					window.location = 'login.html'
			// 				}
			// 			})
			// 			return
			// 		} else {
			// 			this.$message.error(res.data.msg)
			// 			return
			// 		}
			// 	},
			// 	res => {
			// 		this.$message.error('网络错误！')
			// 		return
			// 	}
			// )
			let fn = new FormData()
			fn.append('sign_status', 30) //已合作的店铺
			fn.append('status', 1) //启用的店铺
			// fn.append("search_list", 1); //不进行分页
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
						} else {
							this.shopList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listTicket()
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.listTicket()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.s_staff_name = ''
			this.s_task_sn = ''
			this.s_shop_id = ''
			this.s_shop_name = ''
			this.s_status = ''
			this.s_time_type = ''
			this.ruleForm.date1 = ''
			this.ruleForm.date2 = ''
		},

		goMerchantEdit(row) {
			//编辑页面
			this.$router.push({
				path: '/merchantsEdit',
				query: {
					id: row.id
				}
			})
		},

		//返回
		back() {
			this.$router.go(-1)
		},

		goUser(row) {
			this.$router.push({
				path: '/shopUserList',
				query: {
					id: row.id
				}
			})
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listTicket()
		},
		setnone() {
			this.mes_task_id = ''
			this.mes_task_sn = ''
			this.mes_task_name = ''
			this.mes_shop_id = ''
			this.mes_shop_sn = ''
			this.mes_shop_name = ''
			this.mes_staff_id = ''
			this.mes_staff_sn = ''
			this.mes_staff_name = ''
			this.mes_staff_mobile = ''
			this.mes_amount = ''
			this.mes_reason = ''
			this.mes_beizhu = ''
			this.mes_shenhe = ''
		},
		downloadOrder() {
			//扣罚列表-导出
			var ruleForm_date1 = ''
			var ruleForm_date2 = ''
			if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
				//开始时间与结束时间必须同时存在
				ruleForm_date1 = this.ruleForm.date1
				ruleForm_date2 = this.ruleForm.date2
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				bill_staff_sn: this.bill_staff_sn,
				staff_name: this.s_staff_name,
				task_sn: this.s_task_sn,
				shop_id: this.s_shop_id,
				time_type: this.s_time_type,
				status: this.s_status,
				start_time: ruleForm_date1,
				end_time: ruleForm_date2
			}
			let param = $.param(obj)
			window.location.href = this.url + '/ticket/exportTicketDetail?' + param
		},
		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.s_shop_id = item.id
		}
	},
	filters: {}
}
</script>

<style scoped>
@import '../../assets/style/ticketlist.css';
</style>



// WEBPACK FOOTER //
// src/components/bill/TicketLists.vue